<template>
    <section class="ball-body">
        <div class="ball"></div>
    </section>
</template>

<script>
    export default {
        name: "css-ball"
    }
</script>

<style scoped>
    .ball-body {
        margin: 0;
        height: 600px;
        border-radius: 8px;
        background-color: rgb(148, 147, 143);
    }

    .ball {
        top: 50%;
        left: 50%;
        width: 200px;
        height: 300px;
        border-radius: 50% 50% 30% 30%;
        /* border: 1px solid black; */
        position: absolute;
        transform: translate(-120%, 0%) rotateZ(45deg);
        background-image: radial-gradient(ellipse at top center, rgba(255, 255, 255, 1), transparent 50%);
        background-size: 150px 300px;
        background-position: 10px 0px;
        background-repeat: no-repeat;
        box-shadow: -5px -60px 20px 5px rgba(0, 0, 0, 0.4), inset 0px 50px 20px -15px rgba(0, 0, 0, 0.4);
    }

    .ball::before {
        content: '';
        top: -250px;
        left: -130px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        /* border: 1px solid black; */
        position: absolute;
        transform: rotate(-45deg);
        background-color: rgb(148, 147, 143);
        background-image: radial-gradient(circle,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.1) 25%,
        transparent 50%),
        radial-gradient(ellipse,
                rgba(210, 210, 210, 0.7),
                transparent 50%),
        radial-gradient(ellipse,
                rgba(210, 210, 210, 0.7),
                transparent 50%),
        radial-gradient(ellipse,
                rgba(255, 255, 255, 0.7),
                transparent 50%),
        radial-gradient(ellipse,
                rgba(255, 255, 255, 0.7),
                transparent 50%),
        radial-gradient(ellipse,
                rgba(255, 255, 255, 0.4),
                transparent 50%),
        radial-gradient(ellipse,
                rgba(255, 255, 255, 0.5),
                transparent 50%),
        radial-gradient(ellipse,
                rgba(255, 255, 255, 0.7),
                transparent 50%),
        radial-gradient(ellipse,
                rgba(255, 255, 255, 0.5),
                transparent 50%),
        radial-gradient(ellipse,
                rgba(0, 0, 0, 0.1),
                transparent 60%),
        radial-gradient(ellipse,
                rgba(0, 0, 0, 0.2),
                transparent 60%),
        radial-gradient(ellipse,
                rgba(57, 57, 57, 0.5),
                transparent 50%),
        radial-gradient(ellipse,
                rgba(57, 57, 57, 0.5),
                transparent 50%),
        radial-gradient(ellipse,
                rgba(109, 109, 109, 0.1),
                transparent 50%),
        radial-gradient(ellipse,
                rgba(121, 121, 121, 0.2),
                transparent 50%);
        background-size: /* shine */ 100px 100px,
            /* light */ 100px 100px,
        100px 100px,
        100px 100px,
        100px 100px,
        200px 200px,
        200px 200px,
        200px 200px,
        200px 200px,
            /* dark */ 100px 100px,
        120px 120px,
        120px 120px,
        120px 120px,
        120px 120px,
        120px 120px;
        background-position: /* shine */ 58% -5%,
            /* light small */ -15% 90%,
        -5% 100%,
        5% 110%,
        20% 120%,
            /* light big */ -70% 170%,
        -35% 210%,
        -10% 215%,
        80% 225%,
            /* dark */ -35% 25%,
        -10% -30%,
        135% 15%,
        80% -45%,
        15% 40%,
        75% 80%;
        background-repeat: no-repeat;
        box-shadow: inset -5px 5px 8px 0px rgba(0, 0, 0, 0.15),
        inset -30px 15px 20px -10px rgba(0, 0, 0, 0.2),
        inset -10px 10px 30px 5px rgba(0, 0, 0, 0.2),
        inset -10px 10px 10px -5px rgba(0, 0, 0, 0.1),
        inset 12px -20px 5px -21px rgba(255, 255, 255, 0.8),
        inset 10px -30px 20px -20px rgba(255, 255, 255, 0.5),
        inset 50px -50px 20px -10px rgba(108, 108, 108, 0.15);
    }

    .ball::after {
        content: '';
        top: -240px;
        left: -40px;
        width: 60px;
        height: 80px;
        border-radius: 40px 0 0 0 / 15px 0 0 0;
        position: absolute;
        /* border: 1px solid black; */
        transform: perspective(100px) scaleY(0.5) rotateX(-5deg) rotateY(-15deg) rotateZ(25deg);
        background-color: white;
        background-image: linear-gradient(to right, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
        linear-gradient(to top, transparent 70%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.4) 80%, transparent 90%);
        filter: blur(.5px);
    }

    @media only screen and (max-width: 600px) {
        .ball {
            transform: scale(0.5) translate(-140%, 0%) rotateZ(45deg);
        }
    }
</style>
